<template>
  <el-dialog
    v-dialogDrag
    :title="dialogTitle"
    :close-on-click-modal="false"
    class="dialogStyleSmall"
    :visible.sync="dialogVisible"
  >
    <el-form ref="form" :model="formData" :rules="rules" label-width="auto">
      <!--      <el-col :span="24">-->
      <!--        <el-form-item label="上级类型" prop="parentId">-->
      <!--          <treeselect-->
      <!--            v-model="formData.parentId"-->
      <!--            :options="orgOptions"-->
      <!--            :show-count="false"-->
      <!--            placeholder="选择上级类型"-->
      <!--            no-options-text="暂无类型"-->
      <!--            clearable-->
      <!--            @select="selectParentId"-->
      <!--          />-->
      <!--        </el-form-item>-->
      <!--      </el-col>-->
      <el-col :span="24">
        <el-form-item label="类型名称" prop="typeName">
          <el-input v-model="formData.typeName" placeholder="请输入类型名称" size="medium" />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="类型编号" prop="typeNum">
          <el-input v-model="formData.typeNum" size="medium" placeholder="请输入类型编号" />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="类型排序" prop="orderNum">
          <el-input-number
            v-model="formData.orderNum"
            size="medium"
            style="width: 100%"
            controls-position="right"
            :min="0"
          />
        </el-form-item>
      </el-col>
      <el-col :span="24">
        <el-form-item label="" prop="remark">
          <label slot="label" v-html="`备&emsp;&emsp;注`" />
          <el-input v-model="formData.remark" :rows="3" type="textarea" />
        </el-form-item>
      </el-col>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button size="medium" @click="cancel">取 消</el-button>
      <el-button size="medium" :disabled="btnDisabled" type="primary" @click="submitForm">保 存</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {
  addOrganization,
  editOrganization,
  detailOrganization,
  getMaxNum,
  treeOrganization
} from '@/api/superviseBaseInfo/typeManage/organizationType'
// 菜单下拉树用的的方法和样式
// import treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
export default {
  name: 'AddDialog',
  // components: { treeselect },
  data() {
    return {
      // 单位类型数组
      orgOptions: [],
      /* 表单 start */
      btnDisabled: false,
      dialogVisible: false, // 弹框显隐
      dialogTitle: '', // 弹框标题
      formData: {
        id: '',
        parentId: null,
        typeName: '', // 类型名称
        remark: '',
        orderNum: '',
        typeNum: ''
      },
      // from表单审核
      rules: {
        typeName: [
          { required: true, message: '类型名称不能为空', trigger: 'blur' }
        ],
        orderNum: [{ required: true, message: '类型排序不能为空', trigger: 'blur' }],
        typeNum: [{ required: true, message: '类型编号不能为空', trigger: 'blur' }]
      }
      /* 表单 end */
    }
  },
  methods: {
    handleAdd(title, id, multip) {
      this.dialogTitle = title
      this.dialogVisible = true
      this.emptyForm()
      this.getTree()
      if (id) {
        this.getDetailById(id)
      } else {
        const { parentId, id } = multip
        this.formData.parentId = id // 新增父级回显
        const numId = !parentId ? 0 : id // 查询排序的父级id
        this.getMaxNum(numId)
      }
    },
    async getTree() {
      const { data } = await treeOrganization()
      this.orgOptions = data
    },
    selectParentId(node) {
      this.formData.parentId = node.id
      this.getMaxNum(node.id)
    },
    async getMaxNum(parentId) {
      const { data } = await getMaxNum({ parentId })
      this.formData.orderNum = data
    },
    async  getDetailById(id) {
      const { data } = await detailOrganization(id)
      this.formData = { ...data }
      if (data.parentId === '0') {
        this.formData.parentId = null
      }
    },
    // 弹框取消按钮
    cancel() {
      this.dialogVisible = false
      this.btnDisabled = false
    },
    // 保存
    submitForm() {
      this.$refs['form'].validate(async(valid) => {
        if (valid) {
          this.btnDisabled = true
          if (!this.formData.parentId) {
            this.formData.parentId = '0'
          }
          if (this.formData.id) {
            // 修改
            await editOrganization(this.formData)
            this.msgSuccess('修改成功')
          } else {
            // 新增
            await addOrganization(this.formData)
            this.msgSuccess('保存成功')
          }
          this.cancel()
          this.$parent.getList()
        }
      })
    },
    // 清空弹出
    emptyForm() {
      this.resetForm('form')
      this.formData.id = ''
      this.formData.parentId = null
    }
  }
}
</script>

